<template>
  <div class="role-page">
    <div class="mark" v-show="isShow" @click="isShow = false">
      <img src="~@/assets/img/fx_bg.png" alt="" />
    </div>
    <div class="top">
      <img class="logo" src="~@/assets/img/logo_ymt.png" alt="" />
      <img
        class="fx"
        @click="isShow = true"
        src="~@/assets/img/fx.png"
        alt=""
      />
    </div>
    <div id="magazine">
      <div v-for="(item, index) in imgs" :key="`test_${index}`">
        <div class="text">
          <img :src="item" alt="" />
          <div
            class="yy1"
            @touchstart="
              (e) => {
                start(e, index);
              }
            "
            @touchend="end"
          ></div>
        </div>
      </div>
    </div>
    <div class="center_t">({{ indexPage + "/" + imgs.length }})</div>
  </div>
</template>
<script>
import turn from "@/utils/turn.js"
import { getBookDetail, jssdk } from '@/api/api'
import { encode } from '@/utils/utils.js'
export default {
  name: "FenMian2",
  data () {
    return {
      value: "",
      isShow: false,
      page: 1,
      indexPage: 1,
      data: {},
      imgs: [],
      x: '',
      index: ''
    }
  },
  created () {
    let that = this
    getBookDetail({ id: this.$route.query.id || 1 }).then(res => {
      this.data = res.data
      this.imgs = res.data.imgs
      document.title = `${that.data.time ? '(' + that.data.time + ')' : ''}${that.data.name}`
      this.$nextTick(() => {
        this.init()
      })
    })
    jssdk({ url: encode(window.location.href) }).then(res => {
      this.wxInit(res.data)
    })
  },
  methods: {
    wxInit (data) {
      let that = this
      wx.config({
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: data.appId, // 必填，公众号的唯一标识
        timestamp: data.timestamp, // 必填，生成签名的时间戳
        nonceStr: data.nonceStr, // 必填，生成签名的随机串
        signature: data.signature,// 必填，签名
        jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline', 'updateAppMessageShareData', 'updateTimelineShareData'] // 必填，需要使用的JS接口列表
      })
      wx.ready(function () {   //需在用户可能点击分享按钮前就先调用
        wx.onMenuShareAppMessage({
          title: `${that.data.time ? '(' + that.data.time + ')' : ''}${that.data.name}`, // 分享标题
          desc: that.data.share_desc,
          link: window.location.href,
          imgUrl: that.data.share_img,
          dataUrl: '',
          success: function () {
          }
        })
        wx.onMenuShareTimeline({
          title: `${that.data.time ? '(' + that.data.time + ')' : ''}${that.data.name}`, // 分享标题
          desc: that.data.share_desc,
          link: window.location.href,
          imgUrl: that.data.share_img,
          dataUrl: '',
          success: function () {
          }
        })
        wx.updateAppMessageShareData({
          title: `${that.data.time ? '(' + that.data.time + ')' : ''}${that.data.name}`, // 分享标题
          desc: that.data.share_desc, // 分享描述
          link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: that.data.share_img, // 分享图标
          success: function () {
            // 设置成功
          }
        })
        //自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容（1.4.0）
        wx.updateTimelineShareData({
          title: `${that.data.time ? '(' + that.data.time + ')' : ''}${that.data.name}`, // 分享标题
          link: window.location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
          imgUrl: that.data.share_img, // 分享图标
          success: function () {
            // 设置成功
          }
        })
      })
    },
    start (e, index) {
      this.index = index
      this.x = e.touches[0].pageX
    },
    end (e) {
      if (e.changedTouches[0].pageX <= this.x) {
        this.nextPage()
      } else {
        this.backPage(this.index)
      }
      this.x = ''
    },
    init () {
      let w = document.body.clientWidth
      if (w > 700) {
        this.$router.push({ name: 'readweb', query: { id: this.$route.query.id } })
      }
      let h = parseInt(w / 0.707547)
      let self = this
      $("#magazine").turn("page")
      this.$nextTick(() => {
        $("#magazine").turn({
          display: "single",
          // display: "double",
          elevation: 40,
          duration: 400,
          gradients: true,
          autoCenter: true,
          acceleration: true,
          // gradients: !$.isTouch,
          page: self.page,
          width: w,
          height: h,
          when: {
            turned: function (e, page, pages) {
              //当前页
              self.indexPage = $(this).turn("view")
              //总页数
              console.log(
                "#magazine has " + $("#magazine").turn("pages") + " pages"
              )
            }
          }
        })
      })
    },
    nextPage () {
      if (this.indexPage == this.imgs.length) {
        this.$message('已经是最后一页了')
      }
      $("#magazine").turn('next')
    },
    backPage (index) {
      $("#magazine").turn("page", index)
    }
  },
  components: {}
};
</script>
<style lang="scss" scoped>
.role-page {
  background-size: 100% 100%;
  // padding: 10px 20px 20px 20px;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
}
.top {
  height: 30px;
  width: 100%;
  background: #666;
  display: flex;
  justify-content: space-between;
  padding: 0 14px;
  align-items: center;
  .logo {
    height: 26px;
  }
  .fx {
    height: 22px;
  }
}
#magazine {
  width: 100%;
  // height: 530px;
  margin-top: 60px;
  display: flex;
  justify-content: center;
  .text {
    width: 100%;
    // height: 530px;
    position: relative;
    img {
      width: 100%;
    }
  }
  .current-page {
    position: absolute;
    bottom: 0;
    width: 100%;
    text-align: center;
    font-size: 14px;
    .even-numbers {
      width: 30px;
      height: 30px;
      background: #ffcc66;
      color: #fff;
      right: 0;
      position: absolute;
      bottom: 0px;
      line-height: 30px;
      text-align: center;
    }
    .odd-number {
      position: absolute;
      bottom: 0px;
      width: 30px;
      height: 30px;
      background: #cc00ff;
      color: #fff;
      line-height: 30px;
      text-align: center;
    }
  }
}

#magazine .shadow,
#magazine.shadow {
  -webkit-box-shadow: 0 4px 10px #666;
  -moz-box-shadow: 0 4px 10px #666;
  -ms-box-shadow: 0 4px 10px #666;
  -o-box-shadow: 0 4px 10px #666;
  box-shadow: 0 4px 10px #666;
}

#magazine .turn-page {
  background-color: #fff;
  background-size: 100% 100%;
  -webkit-box-shadow: 0 4px 10px #666;
  -moz-box-shadow: 0 4px 10px #666;
  -ms-box-shadow: 0 4px 10px #666;
  -o-box-shadow: 0 4px 10px #666;
  box-shadow: 0 4px 10px #666;
}
.yy1 {
  width: 100%;
  height: 80%;
  top: 10%;
  left: 0;
  position: absolute;
}
.mark {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1000;
  background: rgba($color: #000000, $alpha: 0.4);
  img {
    width: 100%;
  }
}
.center_t {
  font-size: 14px;
  color: #fff;
  width: 100%;
  text-align: center;
  margin-top: 10px;
}
</style>